<template>
    <div class="page">
        <div class="search-card">
            <el-form :inline="true">
                <el-form-item label="通知标题:">
                    <el-input clearable placeholder="请输入要搜索通知的标题关键字" v-model="searchParams.title" style="width:300px;"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="loadData">搜索</el-button>
                <el-button @click="create">新增</el-button>
            </div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column width="80" label="ID">
                <template slot-scope="data">
                    {{searchParams.page_size * (searchParams.page_no - 1) + data.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="title" label="通知标题"/>
            <el-table-column label="创建时间" width="200">
                <template slot-scope="data">
                    {{formatDate(data.row.createTime)}}
                </template>
            </el-table-column>
            <el-table-column label="更新时间" width="200">
                <template slot-scope="data">
                    {{formatDate(data.row.updateTime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="data">
                    <el-link type="primary" @click="showNotice(data.row)">查看</el-link>
                    <el-link class="ml-1" type="primary" @click="modify(data.row)">修改</el-link>
                    <el-popconfirm title="请确认是否删除此通知?" @confirm="remove(data.row)">
                        <el-link class="ml-1" slot="reference" type="primary">删除</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination
                :current-page="searchParams.page_no"
                :page-sizes="[10, 15,20,30]"
                :page-size="searchParams.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="setPage"
                @size-change="setSize"
                :total="totalCount">
            </el-pagination>
        </div>
        <el-dialog
            title="提示"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="800px">
            <el-form :model="saveForm" :rules="saveRules" ref="saveForm">
                <el-form-item label="通知标题" prop="title">
                    <el-input v-model="saveForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通知内容" prop="message">
                    <div class="w-100" style="clear: both">
                        <div id="editorDom"></div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNotice" :loading="saving">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import api from "@/services/api";
import E from 'wangeditor'
import StringTool from "@/util/StringTool";

export default {
    name: "Notice",
    data() {
        return {
            editor: null,
            dialogVisible: false,
            saving: false,
            searchParams: {
                page_no: 1,
                page_size: 15,
                title: ''
            },
            saveRules:{
                title: [{
                    required:true,message:'请输入通知内容',trigger:'blur'
                }],
                message:  [{
                    required:true,message:'请输入通知内容',trigger:'blur'
                }]
            },
            saveForm: {
                id: 0,
                title: '',
                message: ''
            },
            totalCount: 0,
            tableData: []
        }
    },
    mounted() {

        this.loadData();
    },
    beforeDestroy() {
        if (this.editor) {
            // 销毁编辑器
            this.editor.destroy()
            this.editor = null
        }
    },
    methods: {
        ...StringTool,
        createEditor(initSource = '') {
            if (this.editor) {
                this.editor.txt.html(initSource)
                return;
            }
            // 创建编辑器
            setTimeout(() => {
                this.editor = new E('#editorDom')// 配置 onchange 回调函数，将数据同步到 vue 中
                this.editor.config.onchange = (source) => {
                    this.saveForm.message = source
                }
                this.editor.config.placeholder = '请输入通知内容'
                this.editor.create()
                this.editor.txt.html(initSource)
            }, 200)
        },
        showNotice(notice) {
            this.$alert(notice.message, notice.title, {
                dangerouslyUseHTMLString: true,
                customClass: 'notice-dialog'
            });
        },
        remove(data) {
            const id = data.id; // 获取到当前数据的id
            api.post("/notice/update", {status: 0, id: id}).then(result => {
                // 保存成功 刷新数据
                this.loadData();
            }).catch(err => {
                this.$message(err.message)
            })
        },
        modify(data) {
            const {id,title,message} = data;
            this.saveForm = {id,title,message};
            this.createEditor(data.message)
            this.$refs.saveForm && this.$refs.saveForm.clearValidate();
            this.dialogVisible = true;
        },
        create() {
            this.saveForm = {
                id: 0, title: '', message: ''
            }
            this.dialogVisible = true;
            this.$refs.saveForm && this.$refs.saveForm.clearValidate();
            this.createEditor();
        },
        async saveNotice() {
            const valid = await this.$refs.saveForm.validate();
            if(!valid) return;
            this.saving = true;
            // 提交数据到后端
            api.post("/notice/save", this.saveForm).then(result => {
                // 保存成功 刷新数据
                this.loadData();
                this.dialogVisible = false;
            }).catch(err => {
                this.$message(err.message)
            }).finally(()=>{
                this.saving = false;
            })
        },
        setSize(size) {
            this.searchParams.page_size = size; // 设置查询的页码
            this.loadData(); // 重新查询数据
        },
        setPage(page) {
            this.searchParams.page_no = page; // 设置查询的页码
            this.loadData(); // 重新查询数据
        },
        loadData() {
            api.get("/notice/list", this.searchParams).then(data => {
                this.tableData = data.records; // 数据列表
                this.totalCount = data.total; // 总条数
            })
        }
    }
}
</script>

<style scoped>

</style>
